<!-- quiList page -->
<template>
  <div id="pageQuiList">
    <!-- <qui-list></qui-list> -->
    <qui-list ref="child0" tipsText="自定义文案，默认右边是按钮" msg="弹层" :diyEvent="buttonDiy"></qui-list>
    <qui-list v-on:parentClickEvent="test" msg="test"></qui-list>
    <qui-list
      ref="child1"
      tipsText="最右边是箭头"
      currentView="qui-arrow"
      :diyEvent="arrowDiy"
    ></qui-list>
    <qui-list @parentClickEvent="getInfo" ref="child2" msg="ref测试"></qui-list>
    <qui-list ref="child3" :tipsText="myText" msg="修改" @parentClickEvent="change"></qui-list>
    <qui-list
      :tipsText="info.name + '——' + info.deepobj.color"
      msg="修改"
      :diyEvent="changeInfo"
    ></qui-list>

    <div class="flex-center-center">
      <table border="1">
        <tr>
          <th>姓名 <button @click="changeName">change</button></th>
          <th>年龄</th>
        </tr>
        <tr>
          <td ref="name">{{ fullName }}</td>
          <td>{{ ageNum }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import quiList from "../components/qui/quiList";
export default {
  name: "pageQuiList",
  data() {
    return {
      myText: "默认文本",
      info: {
        name: "张三",
        num: 1,
        deepobj: {
          color: "red"
        }
      },
      name: "张三",
      age: 11
    };
  },
  components: {
    "qui-list": quiList
  },
  methods: {
    test: function() {
      alert("test");
    },
    getInfo: function() {
      console.log("chidren", this.$children);
      console.log("ref", this.$refs.child2);
      //   console.log("chidren",this.$children[0].msg); //通过数组获取,this.$children是指使用到的qui-list作为一个数组
      //   console.log("ref",this.$refs.child1.msg); //通过对象集合获取
    },
    change() {
      if (this.myText != "默认文本") {
        this.myText = "默认文本";
      } else {
        this.myText = "修改后的文本";
      }
    },
    changeInfo() {
      if (this.info.name == "张三") {
        this.info.name = "李四";
      } else {
        this.info.name = "张三";
      }
      if (this.info.deepobj.color !== "red") {
        this.info.deepobj.color = "red";
      } else {
        this.info.deepobj.color = "blue";
      }
      //   this.info.deepobj.color = "blue";
    },
    changeName: function() {
      // console.log(name)
      if (this.name == "张三") {
        this.name = "李四";
        console.log("ref|name:", this.$refs.name.innerHTML);
        //通过ref属性获取到该数据所在的dom结构innerHTML,ref相当于一个id,通过id获取到结构。
        //打印后发现dom结构中的数据还是旧数据，是因为view数据是实时更新，但是数据更新到结构更新需要一定的时间，所以结构中的数据还是旧数据，而页面中的数据已经更改
        this.$nextTick(function() {
          //nextTick回调函数：执行下一次视图更新的回调函数
          //数据实时更新，视图结构更新有一定的延迟
          console.log("ref|name:", this.$refs.name.innerHTML);
        });
      } else {
        this.name = "张三";
      }
    },
    buttonDiy:function(){
      alert("最外层的按钮btndiy事件，取代了原本默认的list中的事件")
    },
    arrowDiy:function(){
      alert("最外层的箭头>arrowdiy事件，取代了原本默认的list中的事件")
    }
  },
  watch: {
    //监听页面数据修改
    myText: function(newV, oldV) {
      console.log("watch:页面监听，在updated之前执行");
      console.log("新数据：" + newV);
      console.log("旧数据：" + oldV);
    },
    //注意：不支持对一个整体对象进行监听，可以监听对象中的某个值
    // 如果要对对象进行监听，如下写法：不能对具体值进行监听
    info: {
      handler: function(n, o) {
        console.log("new:", n, "old:", o);
        console.log("info 被修改了");
      },
      deep: true
    },
    name: function(n, o) {
      console.log("name 被修改了");
    }
  },
  computed: {
    fullName: function() {
      return "Green-" + this.name;
    },
    ageNum: function() {
      return this.age + "岁";
    }
  },
  beforeCreate: function() {
    console.log("beforeCreate");
    console.log(this.myText); //在created之前data中的值还未创建，所以显示undefined
  }, //组件实例化之前
  created: function() {
    console.log("created");
    console.log(this.myText); //在created后data中的值被创建，所以正常显示
    console.log(this.$el); //this.$el代表组件本身，在mounted之前组件本身未被挂载，所以显示undefined
  }, //组件实例化了
  beforeMount: function() {
    console.log("beforeMount");
  }, //组件写入dom结构之前
  mounted: function() {
    //组件写入dom结构了
    console.log("mounted:元素挂载到页面上了");
    console.log("DOM结构本身：",this.$el);
    console.log("页面中所有用到的组件的集合：",this.$children);
    console.log("ref的集合：",this.$refs);//页面中所有的ref属性值child0,child1,child2...
    console.log("例如refs结合中第一个child0的某个属性tipsText值：",this.$refs.child0.tipsText);
  },
  beforeUpdate: function() {
    console.log("beforeUpdate");
  }, //组件更新前
  updated: function() {
    console.log("updated");
  }, //组件更新比如修改了文案
  beforeDestroy: function() {
    console.log("beforeDestroy");
  }, //组件销毁之前
  destroyed: function() {
    console.log("destroyed");
  }, //组件已经销毁
  deactivated() {
    console.log("deactivated");
  },
  activated() {
    console.log("activated");
  }
};
</script>
<style scoped></style>
